<template>
  <view class="redtodo">
    <view class="redlist-box">
<<<<<<< HEAD
        <view class="redlist" data-type="0" @touchstart.capture="touchStart" @touchend.capture="touchEnd" @click="oneself">
=======
      
        <view class="redlist" id="redlist">
>>>>>>> 3ea8afccb68ef2976aebe18fb2b14bf4b7e286de
          <view class="big-circle">
            <view class="little-circle"> </view>
          </view>
          <view class="item">
            {{ item }}
          </view>
        </view>
<<<<<<< HEAD

=======
>>>>>>> 3ea8afccb68ef2976aebe18fb2b14bf4b7e286de
      <view class="btn-box">
        <view class="btn color">
          <view class="smallcolor"></view>
        </view>
        <view class="btn time">
          <image src="/static/时间.png" alt="" class="time"></image>
        </view>
        <view class="btn delete" @click="removeItem(index)">
          <image src="/static/关闭.png" class="delete"></image>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  name: "RedList",
  props: {
    item: String,
  },
  data() {
    return {
      startX: 0,
      endX: 0,
    };
  },
  methods: {
      oneself() {
      if (this.checkSlide()) {
        this.restSlide();
      } else {
        // 点击商品信息弹出弹框
        alert("hello Word!");
      }
    },
    //滑动开始
    touchStart(e) {
      // 记录初始位置
      this.startX = e.touches[0].clientX;
    },
    //滑动结束
    touchEnd(e) {
      // 当前滑动的父级元素
      let parentElement = e.currentTarget.parentElement;
      // 记录结束位置
      this.endX = e.changedTouches[0].clientX;
      // 左滑大于30距离删除出现
      if (parentElement.dataset.type == 0 && this.startX - this.endX > 30) {
        this.restSlide();
        parentElement.dataset.type = 1;
      }
      if (parentElement.dataset.type == 1 && this.startX - this.endX < -30) {
        this.restSlide();
        parentElement.dataset.type = 0;
      }
      this.startX = 0;
      this.endX = 0;
    },
    //判断当前是否有滑块处于滑动状态
    checkSlide() {
      let listItems = document.querySelectorAll(".redlist");
        if (listItems.dataset.type == 1) {
          return true;
        }
      return false;
    },
    //复位滑动状态
    restSlide() {
      let listItems = document.querySelectorAll(".redlist");
      // 复位
        listItems.dataset.type = 0;
    },
    removeItem(val){
       this.redtodo.splice(val, 1);
    }

  },
};
</script>

<style scoped>
.redtodo {
  display: flex;
  justify-content: center;
  margin-top: 20rpx;
  width: 100%;
  overflow: hidden;
}
.redlist-box {
  position: relative;
  width: 680rpx;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.redlist {
  /* position: absolute;
  top: 0%; /*遮住下面的灰盒子*/
  /* left: 0%; */ 
  display: flex;
  align-items: center;
  width: 680rpx;
  height: 120rpx;
  border-radius: 30rpx;
  background-color: brown;
  transition: all 0.2s;
}
.redlist[data-type="0"]{
  transform: translate3d(0,0,0);
}
.redlist[data-type="1"]{
  transform: translate3d(-120rpx,0,0);
}
.big-circle {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 30rpx;
  margin-right: 20rpx;
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  background-color: gray;
}
.little-circle {
  width: 25rpx;
  height: 25rpx;
  border-radius: 50%;
  background-color: white;
}
.item {
  line-height: 120rpx;
  font-family: Smiley Sans;
  color: white;
}
.btn-box {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 680rpx;
  height: 120rpx;
  border-radius: 30rpx;
  background-color: rgb(104, 102, 102);
}
.color {
  margin-right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background-color: brown;
}
.smallcolor {
  width: 45rpx;
  height: 45rpx;
  border-radius: 50%;
  background-color: white;
}
.time {
  margin-right: 10px;
  width: 80rpx;
  height: 80rpx;
}
.delete {
  margin-right: 10px;
  width: 80rpx;
  height: 80rpx;
}
</style>